<template>
  <!--游戏泪痣 -->
  <div class="app-container jklis">
    <div class="zdy-main">
        <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="68px">
          <el-form-item label="游戏名称" prop="name">
            <el-input v-model="queryParams.name" placeholder='游戏名称'></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button icon="el-icon-plus" type="success" @click="addACount">新增</el-button>
          </el-form-item>
          
        </el-form>
          <div class="table_box">
            <div class="tip">注意：已使用的属性不要随意删除或修改，以免旧商品数据匹配不到属性，造成不必要的麻烦。</div>
            <el-table v-if="tableData.records && tableData.records.length" :data="tableData.records" style="width: 100%">
              <el-table-column label="序号" width="80" label-position="left">
                <template slot-scope="scope">
                  <span>{{ scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column label="游戏名称" prop="name" />
              <el-table-column label="游戏类型" prop="type" >
                <template slot-scope="scope">
                  <span>{{ scope.row.type==1?'端游':'手游' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="游戏图标">
                <template slot-scope="scope">
                  <img :src="scope.row.icon" alt="" style="height: 32px;">
                </template>
              </el-table-column>
              <el-table-column label="游戏系列">
                <template slot-scope="scope">
                  <!-- <img :src="scope.row.icon" alt="" style="width: 80px;"> -->
                  <div :class="'carrierType'+scope.row.carrierType">{{carrierTypes[scope.row.carrierType]?carrierTypes[scope.row.carrierType].name:'其他'}}</div>
                  <!-- <div v-if="scope.row.carrierType == 2" style="color: green;">网易系列</div>
                  <div v-if="scope.row.carrierType == 3" style="color: #FFB52B;">米哈游系列</div>
                  <div v-if="scope.row.carrierType == 4" style="color: blue;">其他系列</div> -->
                </template>
              </el-table-column>
              <el-table-column label="排序" prop="sort" />
              <el-table-column fixed="right" label="操作" min-width="220">
                <template slot-scope="scope">
                  <el-button type="edit" icon="el-icon-edit" @click="editItem(scope.row)">编辑</el-button>
                  <el-button type="edit" icon="el-icon-edit"  @click="opentypeConfig(scope.row)">属性配置</el-button>
                  <el-button type="del" icon="el-icon-delete"  @click="del(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
    </div>
   
    <!-- 一下是弹出框 -->
    <addDialog ref="addDialog"></addDialog>
    
    <configDialog ref="configDialog"></configDialog>
  </div>
</template>

<script>
import gameListApi from "@/api/gameConfig/gameList"
import addDialog from "./add.vue";

import configDialog from "./typeConfig.vue";
export default {
  name: "GameList",
  components: { configDialog,addDialog },
  data() {
    return {
      tableData: {
        records: [],
        total: 0
      },
      loading: false,
      queryParams: {
      },
    };
  },
  created() {
    this.getList();
  },
  computed:{
    carrierTypes(){
      return this.arrayToObject(this.$store.getters.gameYunyingshangList,'id')
    }
  },
  methods: {
    // 获取列表
    getList(userId) {
      gameListApi.getGameList(this.queryParams).then(res => {
        if (res.code == 200) {
          this.tableData.records = res.rows
        }
      });
    },

    // 搜索
    search() {
      this.getList();
    },
    // 打开配置弹窗
    opentypeConfig(row) {
      this.$refs.configDialog.open(row);
    },
    // 删除
    del(row){
      this.$modal
          .confirm(
            "是否确认删除" + row.name + '"？'
          )
          .then(() => {
            gameListApi.delGame(row.id).then(res => {
              this.$modal.msgSuccess(res.msg);
              this.search()
            })
          })
    },
    
    // 新增
    addACount() {
      this.$refs.addDialog.open("add");
    },
    // 编辑
    editItem(row){
      this.$refs.addDialog.open("edit",row);
    },
    // //重置
    // resetQuery() {
    //   this.queryParams = {
    //     pageNum: 1,
    //     pageSize: 20,
    //     billType: "",
    //     remark: "",
    //     sort: "descending",
    //     sortColumn: "createTime",
    //     startTime: '',
    //     endTime: ''
    //   }
    //   this.getList();
    // },
  
  }
};
</script>
<style lang="scss" scoped>
.carrierType1{
  color: red;
}
.carrierType2{
  color: green;
}
.carrierType3{
  color: #FFB52B;
}
.carrierType4{
  color: green;
}
</style>
